<template>
  <!-- 达人对比 1 11 -->
  <div id="compare">
    <div class="isVipBox">
      <el-tabs v-model="activeName">
        <div class="beforeSearch" v-show="searchDiv == 1">
          <img src="../../../../assets/wang/talentCompare/dylogo.png" alt class="dyLogo" />
          <p class="dbTitle">达人对比</p>
          <p class="dbNote">
            支持多个达人同时进行对比，对比结果可通过对比历史进行查询。
            <span @click="example = true">查看示例</span>
          </p>
          <div class="searchBox">
            <el-input
              v-model="dyWords"
              placeholder=" 请输入抖音昵称或抖音号进行搜索"
              @keyup.enter.native="toSearch"
            ></el-input>
            <div class="imgBox" @click="toSearch">
              <img src="@/assets/meng/search01.png" alt />
            </div>
          </div>
        </div>
        <!-- 搜索后显示 -->
        <div class="afterSearch" v-show="searchDiv == 2">
          <!-- 左侧搜索结果 -->
          <div class="searchOutBox">
            <div class="searchBox">
              <el-input
                v-model="dyWords"
                placeholder=" 请输入抖音昵称或抖音号进行搜索"
                @keyup.enter.native="toSearch"
              ></el-input>
              <div class="imgBox" @click="toSearch">
                <img src="@/assets/meng/search01.png" alt />
              </div>
            </div>
            <div class="seachRes">
              <section v-if="searchResList.length != 0 && !loading">
                <div
                  class="searchResItem"
                  v-for="(item, index) in searchResList"
                  :key="'b' + index"
                >
                  <div class="avatorBox">
                    <div class="logoBox">
                      <img
                        :src="item.logo"
                        class="logoImg"
                        @click="go_to_page01(item.author_id)"
                        v-errorImg:talent
                      />
                      <div v-if="item.is_delete == 2" class="delete">已封号</div>
                      <div v-if="item.is_delete == 3" class="delete">已注销</div>
                    </div>
                  </div>
                  <div class="talentInfo">
                    <div class="talentName">
                      <span @click="go_to_page01(item.author_id)">
                        {{
                        item.nickname
                        }}
                      </span>
                      <img
                        src="../../../../assets/wang/talentCompare/shop.png"
                        v-if="item.is_shop == 1"
                      />
                      <!-- 个人认证 -->
                      <img
                        src="../../../../assets/wang/talentCompare/rzOrange.png"
                        v-if="item.verify_type == 1"
                        class="ideImg"
                      />
                      <!-- 企业认证 -->
                      <img
                        src="../../../../assets/wang/talentCompare/rzBlue.png"
                        v-if="item.verify_type == 2"
                        class="ideImg"
                      />
                    </div>
                    <p class="addTop">
                      <span>抖音号:</span>
                      <span>{{ item.unique_id }}</span>
                    </p>
                  </div>

                  <img
                    class="addImg"
                    src="../../../../assets/wang/talentCompare/add.png"
                    @click="toAdd(item)"
                    v-if="!item.inCompare"
                  />

                  <div v-if="item.inCompare" class="added">已添加</div>
                </div>
              </section>
              <div
                v-loading="loading"
                v-if="loading"
                class="loading"
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
              ></div>
              <div class="nodataBox" v-if="searchResList.length == 0 && !loading">
                <img src="@/assets/liu/zw.png" />
                <p>暂无数据</p>
              </div>
            </div>
          </div>
          <!-- 右侧对比 -->
          <div class="compareBox">
            <div class="compareTitle">
              <div class="compareTitle_left">
                <div class="notice-box"></div>
                <span>已选中的达人</span>
              </div>

              <div class="surplus">
                对比次数剩余
                <span>{{ surplusCount }}</span>次
              </div>
            </div>
            <div class="compareList">
              <div class="compareItem" v-for="(item, index) in waitCompareList" :key="'c' + index">
                <div class="startBox">
                  <div class="logoBox">
                    <img
                      :src="item.logoC"
                      class="logoImg"
                      @click="go_to_page01(item.authorIdC)"
                      v-errorImg:talent
                    />
                    <div v-if="item.is_delete == 2" class="delete">已封号</div>
                    <div v-if="item.is_delete == 3" class="delete">已注销</div>
                  </div>
                  <!-- <img :src="item.logoC" class="avatorImg" /> -->

                  <span @click="go_to_page01(item.authorIdC)">
                    {{
                    item.nickNameC
                    }}
                  </span>
                </div>

                <img
                  src="../../../../assets/li/cancel.png"
                  class="deleteImg"
                  @click="cancelAdd(index, item)"
                  @mouseover="overShow(item.authorIdC)"
                  v-if="!showIf || showId != item.authorIdC"
                />

                <img
                  src="../../../../assets/li/cancel02.png"
                  class="deleteImg"
                  @click="cancelAdd(index, item)"
                  @mouseleave="leaveShow()"
                  v-if="showId == item.authorIdC && showIf"
                />
              </div>
            </div>
            <div class="btnBox">
              <div class="cancelBtn" @click="cancelCompare">取消对比</div>

              <div class="confirmBtn_02" v-if="waitCompareList.length < 2">确定对比</div>
              <div
                class="confirmBtn btn"
                @click="confirmCompare"
                v-if="waitCompareList.length >= 2 && !showButton"
              >确定对比</div>
              <div
                class="confirmBtn boxShow"
                @click="confirmCompare"
                v-if="showButton && waitCompareList.length >= 2"
              >
                <div
                  v-loading="showLoading1"
                  class="showLoading1"
                  element-loading-spinner="el-icon-loading"
                ></div>
                <div class="boxShow_text">对比中</div>
              </div>
            </div>
          </div>
        </div>
        <!-- </el-tab-pane> -->
        <!-- <el-tab-pane label="直播号对比" name="second">直播号对比</el-tab-pane> -->
      </el-tabs>

      <!-- 示例 -->
      <el-dialog :visible.sync="example" :show-close="false">
        <div class="popBox">
          <div class="imgBox">
            <img src="../../../../assets/li/talentExample.png" />
            <img src="@/assets/wang/talentCompare/exampleIcon.png" />
          </div>
        </div>
        <img src="@/assets/wang/video/close.png" class="closeImg" @click="example = false" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      activeName: 'first',
      dyWords: '',
      searchDiv: 1, //1:搜索前 2：搜索后
      searchResList: [],
      waitCompareList: [],
      cancel: null,
      example: false,
      isVip: false,
      finish: false,
      loading: true,
      showEg: true,
      showIf: false,
      showId: '',
      surplusCount: '',
      showLoading1: false,
      showButton: false
    };
  },

  watch: {
    dyWords: function () {
      if (this.dyWords == '') {
        this.searchResList = [];
        this.toSearch();
      }
    }
  },
  created() {
    // console.log('重新加载')
    localStorage.removeItem('inCompareList');
    localStorage.removeItem('waitCompareList');
    this.$axios
      .get('/api/customer/GetNumberofvisitsDetailed', {
        params: {
          API: '/api/author/addcompare'
        }
      })
      .then(res => {
        if (res.data.code == 0) {
          this.surplusCount = res.data.data.surplusCount;
        }
      });
  },
  mounted() {},
  methods: {
    // 搜索
    toSearch() {
      let that = this;
      that.searchDiv = 2;
      that.loading = true;
      // that.$axios.get('/api/author/compare?nickname=' + that.dyWords)
      that.$axios
        .get('/api/author/compare', {
          params: {
            nickname: this.trimStr(that.dyWords)
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.searchResList = res.data.data;

            that.searchResList.forEach(element => {
              if (
                JSON.parse(localStorage.getItem('inCompareList')) &&
                JSON.parse(localStorage.getItem('inCompareList')).includes(element.author_id)
              ) {
                Object.assign(element, {
                  inCompare: true
                });
              } else {
                Object.assign(element, {
                  inCompare: false
                });
              }
            });
            this.loading = false;
            // console.log('添加对比标志后', that.searchResList)
          } else if (res.data.code == 1002) {
            this.searchResList = [];
            this.loading = false;
          } else {
            this.loading = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 添加对比
    toAdd(item) {
      this.showIf = false;
      // 判断当前等待对比的数组长度 需大于2小于6
      if (this.waitCompareList.length < 6) {
        Object.assign(item, {
          inCompare: true
        });
        // console.log('添加对比后', this.searchResList)
        // 将该条数据存到待对比数组
        let compareObj = {};
        compareObj.logoC = item.logo;
        compareObj.authorIdC = item.author_id;
        compareObj.nickNameC = item.nickname;
        compareObj.is_delete = item.is_delete;

        // 存待对比数组
        if (JSON.parse(localStorage.getItem('waitCompareList'))) {
          this.waitCompareList = JSON.parse(localStorage.getItem('waitCompareList'));
        }
        this.waitCompareList.push(compareObj);
        localStorage.setItem('waitCompareList', JSON.stringify(this.waitCompareList));
        this.$message({
          message: '添加成功',
          center: true,
          duration: 1500,
          offset: 444,
          type: 'success'
        });
        // 存id
        let compareArr = [];
        if (JSON.parse(localStorage.getItem('inCompareList'))) {
          compareArr = JSON.parse(localStorage.getItem('inCompareList'));
        }
        compareArr.push(item.author_id);

        localStorage.setItem('inCompareList', JSON.stringify(compareArr));
      } else {
        if (document.getElementsByClassName('el-message').length === 0) {
          this.$message({
            message: '对比达人数不得超过6人',
            center: true,
            duration: 1500,
            offset: 444,
            type: 'warning'
          });
        }

        return;
      }
    },
    // 取消添加
    cancelAdd(index, item) {
      // 删除左面对比列表指定项并重新存储
      this.waitCompareList = JSON.parse(localStorage.getItem('waitCompareList'));
      this.waitCompareList.splice(index, 1);
      localStorage.setItem('waitCompareList', JSON.stringify(this.waitCompareList));
      //删除存储的对比id 重新存储删除后的 并且将左侧数组的对比标志改为false
      let delIndex = JSON.parse(localStorage.getItem('inCompareList')).findIndex(
        i => i == item.authorIdC
      );
      let inCompareList = JSON.parse(localStorage.getItem('inCompareList'));
      inCompareList.splice(delIndex, 1);
      localStorage.setItem('inCompareList', JSON.stringify(inCompareList));
      this.searchResList.forEach(element => {
        if (element.author_id == item.authorIdC) {
          Object.assign(element, {
            inCompare: false
          });
        }
      });
      this.$message({
        message: '取消成功',
        center: true,
        duration: 1500,
        offset: 444,
        type: 'success'
      });
    },
    // 取消对比
    cancelCompare() {
      this.dyWords = '';
    },
    // 确定对比
    confirmCompare() {
      let that = this;
      // 对比人数需要大于2

      if (this.waitCompareList.length < 2) {
        this.$message({
          message: '请至少选择两位达人进行对比',
          center: true,
          duration: 1500,
          offset: 444,
          type: 'warning'
        });
      } else {
        this.$axios
          .get('/api/customer/GetNumberofvisitsDetailed', {
            params: {
              API: '/api/author/addcompare'
            }
          })
          .then(res => {
            if (res.data.code == 0) {
              this.surplusCount = res.data.data.surplusCount;
              if (res.data.data.surplusCount) {
                this.showButton = true;
                this.showLoading1 = true;
                this.$axios
                  .get(
                    '/api/author/addcompare?api-version=2',
                    {
                      params: {
                        author_ids: JSON.parse(localStorage.getItem('inCompareList')).join(',')
                      }
                    },
                    {
                      cancelToken: new that.$axios.CancelToken(function executor(c) {
                        if (that.cancel != null) {
                          that.cancel();
                        }
                        that.cancel = c;
                      })
                    }
                  )
                  .then(res => {
                    if (res.data.code == 0) {
                      this.showLoading1 = false;
                      this.$emit('childByValue', 3);
                    }
                  })
                  .catch(err => {
                    console.log(err);
                  });
              } else {
                this.$message({
                  message: '您的对比次数已用完，请升级您的会员等级。',
                  duration: 2000,
                  customClass: 'includeMessage',
                  offset: 154
                });
              }
            }
          });
      }
    },
    // 去升级会员
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`
      });
      window.open(router.href, '_blank');
    },
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    },
    overShow(id) {
      this.showId = id;
      this.showIf = true;
    },
    leaveShow() {
      this.showIf = false;
      this.showId = '';
    }
  }
};
</script>

<style scoped lang="less">
#compare {
  background: #fff;

  position: relative;
  overflow: hidden;
  border-radius: 4px;
  min-height: 100vh;
  padding: 0 20px;
  // padding-top: 17px;
  // background-image: url(../../../../assets/wang/talentCompare/bg.png);
  background-image: url(../../../../assets/wang/talentCompare/bg.jpg);
  background-repeat: no-repeat;
  background-size: 100% 95%;
  // vip
  .isVipBox {
    // 搜索前显示
    .beforeSearch {
      margin: 0 auto;
      margin-top: 241px;
      text-align: center;

      .dyLogo {
        width: 76px;
        height: 84px;
      }

      .dbTitle {
        font-size: 34px;
        font-weight: 600;
        font-stretch: normal;
        line-height: 30px;
        letter-spacing: 1px;
        color: #222222;
        padding-top: 27px;
      }

      .dbNote {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 30px;
        letter-spacing: 0px;
        color: #555555;
        padding-top: 22px;

        span {
          color: #fd7f2c;
          cursor: pointer;
        }
      }
    }

    // 搜索后显示
    .afterSearch {
      width: 100%;
      margin-top: 88px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 50px;
      //  左侧搜索结果
      .searchOutBox {
        width: 600px;
        height: 600px;
        // margin: 0 auto;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        box-shadow: 0px 0px 16px 0px rgba(142, 142, 142, 0.3);

        .searchBox {
          width: 600px !important;
          margin-top: 0 !important;
        }

        // 搜索结果 最多5个
        .seachRes {
          width: 603px;
          height: 533px;
          overflow-y: auto;
          background-color: #fff;
          padding-top: 15px;

          .searchResItem {
            width: 549px;
            height: 78px;
            margin: 0 auto;
            display: flex;
            justify-content: start;
            align-items: center;
            border-bottom: solid 1px #e5e5e5;
            overflow: hidden;

            // padding: 20px 0;
            .avatorBox {
              .logoBox {
                position: relative;

                .logoImg {
                  cursor: pointer;
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  display: block;
                  margin: 0 auto;
                  border: 1px solid #e5e5e5;
                }

                .delete {
                  width: 58px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  background-color: #f5f5f5;
                  border-radius: 12px;
                  border: solid 1px #e5e5e5;
                  font-size: 14px;
                  color: #222222;
                  position: absolute;
                  left: 50%;
                  bottom: 0;
                  transform: translate(-50%, 0);
                }
              }
            }

            .talentInfo {
              width: 384px;
              margin-left: 8px;

              .talentName {
                // line-height: 30px;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                span {
                  display: inline-block;
                  max-width: 265px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
                  font-weight: 600;
                  letter-spacing: 1px;
                  color: #222222;
                  cursor: pointer;
                }
                span:hover {
                  color: #fd7f2c;
                }
                img {
                  display: inline-block;
                  width: 16px;
                  height: 16px;
                  margin-left: 9px;
                }
              }

              p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                letter-spacing: 0px;
                color: #888888;
                // padding-top: 15px;
                // line-height: 30px;
              }

              .addTop {
                padding-top: 6px;
              }

              p:nth-of-type(2) {
                overflow: hidden;

                span {
                  float: left;
                }

                span:nth-of-type(2) {
                  display: inline-block;
                  width: 342px;
                }
              }
            }

            .addImg {
              width: 26px;
              height: 26px;
              display: block;
              margin-left: 69px;
              cursor: pointer;
              outline: none;
            }
            .added {
              margin-left: 54px;
              font-size: 14px;
              font-weight: normal;

              color: #888888;
            }
          }

          // 搜索无结果
          .nodataBox {
            img {
              width: 218px;
              height: 175px;
              display: block;
              margin: 0 auto;
              margin-top: 150px;
            }

            p {
              font-size: 16px;
              color: #888888;
              text-align: center;
            }
          }
        }
      }

      // 右侧对比
      .compareBox {
        width: 360px;
        height: 600px;
        background-color: #ffffff;
        border-radius: 4px;
        border: solid 1px #e5e5e5;
        margin-left: 20px;
        position: relative;
        box-shadow: 0px 0px 16px 0px rgba(142, 142, 142, 0.3);

        .compareTitle {
          display: flex;
          justify-content: start;
          align-items: center;
          margin-top: 21px;
          justify-content: space-between;

          .notice-box {
            display: inline-block;
            width: 4px;
            height: 16px;
            border-radius: 100px;
            margin-right: 6px;
            background-color: #fd7f2c;
            margin-left: 20px;
          }
          .surplus {
            font-size: 14px;
            color: #888888;
            margin-right: 20px;
            span {
              font-size: 14px;
              color: #fd7f2c;
            }
          }
          span {
            font-size: 16px;
            font-weight: 600;
            color: #222222;
          }
          .compareTitle_left {
            display: flex;
            align-items: center;
          }
        }

        .compareList {
          width: 100%;

          .compareItem {
            // width: 307px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0 20px;
            margin-top: 20px;

            .startBox {
              display: flex;
              justify-content: flex-start;
              align-items: center;
            }

            .logoBox {
              position: relative;
              width: 50px;
              height: 50px;

              .logoImg {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: block;
                margin: 0 auto;
                border: 1px solid #e5e5e5;
                cursor: pointer;
              }

              .delete {
                width: 50px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                background-color: #f5f5f5;
                border-radius: 12px;
                border: solid 1px #e5e5e5;
                font-size: 12px;
                color: #222222;
                position: absolute;
                left: 50%;
                bottom: -2px;
                transform: translate(-50%, 0);
              }
            }

            span {
              flex: 1;
              text-align: left;
              display: inline-block;
              max-width: 146px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 14px;
              color: #222222;
              font-weight: 600;
              padding-left: 8px;
              cursor: pointer;
            }
            span:hover {
              color: #ff924b;
            }
            .deleteImg {
              width: 32px;
              height: 32px;
              cursor: pointer;
            }
          }
        }

        .btnBox {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          bottom: 28px;

          .cancelBtn,
          .confirmBtn,
          .confirmBtn_02 {
            width: 100px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            border-radius: 4px;
            font-size: 14px;
          }

          .cancelBtn {
            cursor: pointer;
            border-radius: 4px;
            border: solid 1px #e5e5e5;
            color: #888888;
          }

          .confirmBtn {
            cursor: pointer;
            border: solid 1px #fd7f2c;
            color: #fd7f2c;
            margin-left: 20px;
          }
          .btn:hover {
            border-color: #ff924b;
            color: #ff924b;
          }
          .boxShow {
            position: relative;
            border: solid 1px #fd7f2c;
            color: #ff924b;
          }
          .confirmBtn_02 {
            border: 1px solid #e5e5e5;
            color: #888888;
            background: #f9f9f9;
            margin-left: 20px;
          }
        }

        .boxShow_text {
          position: absolute;
          left: 38px;
        }
      }
    }

    // 搜索框
    .searchBox {
      margin: 0 auto;
      margin-top: 50px;
      width: 600px;
      height: 48px;
      border-radius: 4px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      border: solid 2px #fd7f2c;
      .el-input {
        height: 100%;
        flex: 1;
      }

      .imgBox {
        height: 100%;
        width: 56px;
        background: #fd7f2c;

        cursor: pointer;

        img {
          width: 22px;
          height: 22px;
          display: block;
          margin: 0 auto;
          margin-top: 13px;
        }
      }
    }

    .popBox {
      background-color: #ffffff;
      border-radius: 4px;
      height: 85vh;
      overflow-y: auto;

      .imgBox {
        width: 100%;
        position: relative;

        img:nth-of-type(1) {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }

        img:nth-of-type(2) {
          width: 272px;
          height: 97px;
          position: absolute;
          left: 50%;
          top: 427px;
          transform: translate(-50%, 0);
        }
      }

      // min-width: 804px;
      // min-width: 1200px;
    }

    // 弹窗关闭
    .closeImg {
      cursor: pointer;
      position: absolute;
      width: 22px;
      height: 22px;
      right: 20px;
      top: 11px;
    }
  }
}
</style>
